<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>活动专区</title>
    <meta name="keywords" content="活动专区" />
    <meta name="description" content="活动专区" />
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width,viewport-fit=cover">
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/swiper.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/public.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/index.css}">
    <link th:href="@{/shoppingApi/css/weui.min.css}" rel="stylesheet">
    <link th:href="@{/shoppingApi/css/jquery-weui.min.css}" rel="stylesheet">

    <style>
        * {
            box-sizing: border-box;
        }
        .index .top {
            bottom: 0;
        }
        .index .tabul {
            position: absolute;
            top: 90px;
            height: auto;
            overflow: auto;
            margin-top: 0;
            /*padding-top: 91px;*/
            bottom: 50px;
            width: 100%;
            background-color: #f0f0f0;
            z-index: 11;
        }
        .index .bannerimg {
            margin-top: 0;
        }
        .main_con {
            height: 100%;
        }

        .index .banner .swiper-container .active span {
            display: inline-block;
            height: 45px;
            /*color: #f70029;*/
            /*border-bottom: 2px solid #f70029;*/
            color: #323232;
            border-bottom: none;
        }
        /*.duihuan{*/
            /*display: inline-block;*/
            /*height: 45px;*/
            /*color: #f70029;*/
        /*}  */
        .huodong{
            display: inline-block;
            height: 45px;
            color: #f70029;
        }
        .index .tabul .goodscon li {
            /*margin-bottom: 10px*/
        }
        .index .tabul .goodscon li a>span {
            background-color: #fff;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            height: 9rem;
        }
        .index .tabul .goodscon li a>div p:first-of-type {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: auto;
        }
    </style>




</head>
<body>
<div class="main index">
    <div class="main_con">
        <div class="top bgfff">
            <!--搜索框-->
            <div class="search flex flex-ac">
                <a class="rela" href="/wap/getSysMessage">
                    <img class="w100  message" th:src="@{/shoppingApi/images/mess.png}">
                    <span class="abs num message-count"></span>
                </a>
                <div class="it1">
                    <a th:href="@{/wap/search}" class="flex flex-ac db">
                        <img th:src="@{/shoppingApi/images/search.png}">
                        <input class="it1" type="text" placeholder="请输入关键词">
                    </a>
                </div>
            </div>
            <!--导航栏-->
            <div class="banner pl15 pr15">
                <div class="swiper-container ftc ft14 c323232">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><a href="/wap/productIndex" class="lingshouzhuanqu">零售专区</a></div>
                        <div class="swiper-slide"><a href="/wap/openDuiHuan?pageNum=1&sign=5" class="duihuan">兑换专区</a></div>
                        <div class="swiper-slide"><a href="/wap/openTiYan?pageNum=1&sign=3" class="tiyan">体验专区</a></div>
                        <div class="swiper-slide active"><a th:href="@{'/wap/openHuoDong?sign=7'}" class="huodong">活动专区</a></div>
                        <!--<div class="swiper-slide active"><a href="javascript:alert('敬请期待')" class="huodong">活动专区</a>-->
                    </div>
                </div>
            </div>
        </div>

        <!--导航分类2  -->
        <div class="tabul  duihuan"  >


            <ul class="goodscon overflow  page-info" style="margin-top:5px;">
                <!--<li th:each="indexProduct:${map.indexProductList}">-->

                    <!--<a th:if="${indexProduct.productId!=490}"  th:href="@{${'/wap/getDetails?productId='+indexProduct.productId+'&guigeId='+indexProduct.guigeId}}" class="db">-->
                        <!--<span><img class="w100" th:src="@{${'http://xlspic.ycsqd.com'+indexProduct.proImg}}"></span>-->
                        <!--<div class="bgfff pt15 pl10 pb15">-->
                            <!--<p class="ft14 c323232"th:text="${indexProduct.productDesc}"></p>-->
                            <!--<p class="cf70029 mt10">-->
                                <!--<span class="ft14">￥</span><span class="ft17 mr10" th:text="${#numbers.formatDecimal(indexProduct.proPrice,1,2)}"></span>-->
                            <!--</p>-->
                        <!--</div>-->
                    <!--</a>-->
                    <!--<a th:if="${indexProduct.productId==490}"  th:href="@{${'/wap/activity?productId='+indexProduct.productId}}" class="db">-->
                        <!--<span><img class="w100" th:src="@{${'http://xlspic.ycsqd.com'+indexProduct.proImg}}"></span>-->
                        <!--<div class="bgfff pt15 pl15 pb15">-->
                            <!--<p class="ft14 c323232 pover2"th:text="${indexProduct.productDesc}"></p>-->
                            <!--<p class="cf70029 mt10">-->
                                <!--<span class="ft14">￥</span><span class="ft17 mr10" th:text="${#numbers.formatDecimal(indexProduct.proPrice,1,2)}"></span>-->
                            <!--</p>-->
                        <!--</div>-->
                    <!--</a>-->
                <!--</li>-->
            </ul>

        </div>
        <!--滚动加载-->
        <div class="weui-infinite-scroll">
            <div class="infinite-preloader"></div>
            <!--正在加载... &lt;!&ndash; 文案，可以自行修改 &ndash;&gt;-->
        </div>
        <!--分享弹窗-->
        <div class="window_alert" style="display: none">
            <div class="window_con bgfff ftc pt15">
                <p class="ft17 cff0000 mb15">赚<label>3.45</label></p>
                <p class="ft14 c323232 pl15 pr15">1.只要你的好友通过你的链接购买此商品，你就能赚到至少<span class="cf70029">3.45</span>元利润（可提现哦）</p>
                <p class="flex mt20 mb20 flex-ac pl15 pr15">
                    <span class="ml20 mr20 it1 lineh1"></span>
                    <span class="ft14 c323232">分享到</span>
                    <span class="ml20 mr20 it1 lineh1"></span>
                </p>
                <ul class="overflow ft14 c323232 ftc">
                    <li>
                        <img th:src="@{/shoppingApi/images/share1.png}">
                        <p class="mt10" onclick="wxHaoYou()">微信好友</p>
                    </li>
                    <li>
                        <img th:src="@{/shoppingApi/images/share2.png}">
                        <p class="mt10" onclick="PengYouJuan()">朋友圈</p>
                    </li>
                    <li>
                        <img src="@{/shoppingApi/images/share3.png}">
                        <p class="mt10">QQ好友</p>
                    </li>
                    <li>
                        <img th:src="@{/shoppingApi/images/share4.png}">
                        <p class="mt10">生成二维码</p>
                    </li>
                    <li>
                        <img th:src="@{/shoppingApi/images/share5.png}">
                        <p class="mt10">复制链接</p>
                    </li>
                </ul>
                <img class="close" th:src="@{/shoppingApi/images/close3.png}">
            </div>
        </div>
        <span class="back-top"></span>
        <div class="fixedBox50">
            <ul class="fixed-bottom bottom flex flex-pc ftc bgfff nft10 c323232">
                <li class="it1 active">
                    <a class="db" >
                        <span class="img"></span>
                        <span>首页</span>
                    </a>
                </li>
                <li class="it1">
                    <a th:href="@{/wap/selectProductYJAndRjClassfy}" class="db">
                        <span class="img"></span>
                        <span>分类</span>
                    </a>
                </li>
                <li class="it1">
                    <a th:href="@{/wap/getCartList}" class="db">
                        <span class="img"></span>
                        <span>购物车</span>
                    </a>
                </li>
                <li class="it1">

                    <a th:href="@{/wap/openUserCenter}" class="db">
                        <span class="img"></span>
                        <span>我的</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" th:src="@{/shoppingApi/js/jquery-3.3.1.min.js}"></script>
<script type="application/javascript" th:src="@{/shoppingApi/js/common.js}"></script>
<!--<script type="application/javascript" th:src="@{/shoppingApi/js/swiper.min.js}"></script>-->
<script th:src="@{/shoppingApi/js/jquery-weui.min.js}"></script>


<script type="application/javascript" >
    /*请求头定义*/


    /*回到顶部*/
    $(".back-top").on('click',function () {
        $(".main").animate({
            scrollTop: 0
        }, 1000)
    })
    // var mySwiper = new Swiper('.banner .swiper-container', {
    //     slidesPerView : 4,
    //     spaceBetween : 30,
    //     observer:true,
    //     observeParents:true,
    //     on:{
    //         click: function(){
    //             var clickedIndex= this.clickedIndex;
    //             this.slideTo(clickedIndex, 1000, true);
    //             if(!$(".banner .swiper-slide").eq(clickedIndex).hasClass('active')){
    //                 $(".banner .swiper-slide").eq(clickedIndex).siblings().removeClass('active');
    //                 $(".banner .swiper-slide").eq(clickedIndex).addClass('active');
    //                 $(".main_con .tabul").eq(clickedIndex).siblings(".tabul").addClass("hide");
    //                 $(".main_con .tabul").eq(clickedIndex).removeClass("hide");
    //             }
    //         }
    //     }
    // })

    /*消息*/
    $('.message').on('click',function () {
        $.ajax({
            url:'/wap/getAllMessages',
            success:function (result) {
                console.log(result);
            }
        })
    })

    //首页消息显示条数
    $(function () {
        $.ajax({
            url:'/wap/getAllMessages',
            success:function (result) {
                console.log(result);
                $('.message-count').html(result.allMessageSize);
            }
        })
    })

    /*进入消息页面*/
    $('.message').on('click',function () {
        window.location.href="/wap/getSysMessage";
    })



    /*点击体验专区加载*/
    $('.tiyan').on('click',function () {
        //销毁插件
        $(document.body).destroyInfinite();
        //隐藏
        $('.weui-loadmore1').remove();
        $('.weui-loading1').remove();
        $('.weui-loadmore__tips1').remove();

        // inifinite();

    })


    /*点击活动专区加载*/
    $('.huodong').on('click',function () {
        //销毁插件
        $(document.body).destroyInfinite();
        //隐藏
        $('.weui-loadmore1').remove();
        $('.weui-loading1').remove();
        $('.weui-loadmore__tips1').remove();

        // inifinite();

    })



   //滚动加载

    //滚动加载
    var page=1;
    var loading = false;  //状态标记
    $(function () {
        loadList(true);
        $('.tabul').infinite().on("infinite", function() {
            console.log("滚动加载");
            if(loading) return;
            loading = true;
            loadList()
        });
    })
    function loadList() {
        $.showLoading("正在加载...");
        $.ajax({
            url:'/wap/getActiveData?page='+page,
            success:function (res) {
                $.hideLoading();
                console.log(res.indexProductList);
                getActiveData(res.indexProductList);
                page++;
                loading = false;

            }
        })
    }

    function getActiveData(data) {
        var html='';

        $.each(data,function (i,item) {
            html+= `<li >
                    <a  href="/wap/getDetails?productId=${item.productId}&guigeId=${item.guigeId}" class="db">
                        <span><img class="w100" src="http://xlspic.ycsqd.com${item.proImg}"></span>
                        <div class="bgfff pt15 pl10 pb15">
                            <p class="ft14 c323232">${item.productDesc}</p>
                            <p class="cf70029 mt10">
                                <span class="ft14">￥</span><span class="ft17 mr10" >${item.proPrice.toFixed(2)}</span>
                            </p>
                        </div>
                    </a>

                </li>
            `

        })
        $('.page-info').append(html);
    }



</script>
</html>
